<template>
	<el-dialog :title="titleMap[mode]" v-model="visible" :width="1000" destroy-on-close @closed="$emit('closed')" :align-center="true">
        <el-header>
            <div></div>
            <div class="btnType">
                <el-button type="primary">已审核</el-button>
                <el-button type="primary">工序<el-icon class="el-icon--right"><el-icon-CaretBottom /></el-icon></el-button>
                <el-button type="primary">质检<el-icon class="el-icon--right"><el-icon-CaretBottom /></el-icon></el-button>
                <el-button type="primary">完工<el-icon class="el-icon--right"><el-icon-CaretBottom /></el-icon></el-button>
            </div>
            <div class="caozuo">
                <el-button type="primary">打印<el-icon class="el-icon--right"><el-icon-Printer /></el-icon></el-button>
                <el-button type="primary">批量操作<el-icon class="el-icon--right"><el-icon-CaretBottom /></el-icon></el-button>
            </div>
        </el-header>
		<el-form ref="form" :model="form" label-width="100px" style="margin-top: 20px" :disabled="mode=='show'">
            <el-row :gutter="1"> 
                <el-col :span="5">
                    <el-form-item label="生产单号" prop="remark">
                        <el-input v-model="form.remark" readonly></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="5" style="margin-left:30px">
                    <el-form-item label="客户订单号" prop="remark">
                        <el-input v-model="form.remark" readonly></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="5" style="margin-left:30px">
                    <el-form-item label="计划数" prop="remark">
                        <el-input v-model="form.remark" readonly></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="5" style="margin-left:30px">
                    <el-form-item label="计划完工" prop="remark">
                        <el-input v-model="form.remark" readonly></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="1">
                <el-col :span="5">
                    <el-form-item label="产品编号" prop="remark">
                        <el-input v-model="form.remark" readonly></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="5" style="margin-left:30px">
                    <el-form-item label="产品名称" prop="remark">
                        <el-input v-model="form.remark" readonly></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="5" style="margin-left:30px">
                    <el-form-item label="规格型号" prop="remark">
                        <el-input v-model="form.remark" readonly></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="5" style="margin-left:30px">
                    <el-form-item label="条形码" prop="remark">
                        <el-input v-model="form.remark" readonly></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="1">
                <el-col :span="5">
                    <el-form-item label="质检合格" prop="remark">
                        <el-input v-model="form.remark" readonly></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="5" style="margin-left:30px">
                    <el-form-item label="已入库数" prop="remark">
                        <el-input v-model="form.remark" readonly></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="5" style="margin-left:30px">
                    <el-form-item label="实际完工" prop="remark">
                        <el-input v-model="form.remark" readonly></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="5" style="margin-left:30px">
                    <el-form-item label="预算费用" prop="remark">
                        <el-input v-model="form.remark" readonly></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="1">
                <el-col :span="20">
                    <el-form-item label="备注" prop="remark">
                        <el-input v-model="remark" placeholder="备注" show-word-limit type="textarea" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-tabs tab-position="top">
				<el-tab-pane label="1.所需物料">
                    <el-header v-if="mode!='show'">
                        <div>
                            <el-button type="primary">添加物料</el-button>
                            <el-button type="primary">调整物料仓库</el-button>
                            <el-button type="primary">提请采购物料</el-button>
                        </div>
                    </el-header>
					<el-main>
                        <sc-form-table ref="table" v-model="form.list" :addTemplate="addTemplate" placeholder="暂无数据" hideAdd>
                            <el-table-column label="编号" prop="id" width="50" align="center"></el-table-column>
							<el-table-column label="操作" width="130" align="center">
								<template #default="scope">
									<div class="btnDisplay">
										<div class="btn" @click="handleModify(scope.$index,scope.row)">修改</div>
										<div class="btn" @click="handleDelete(scope.$index,scope.row)">删除</div>
									</div>
								</template>
							</el-table-column>
							<el-table-column label="名称" prop="name" width="100" align="center"></el-table-column>
							<el-table-column label="规格型号" prop="goodsSpec" width="100" align="center"></el-table-column>
							<el-table-column label="可用库存数" prop="useKuNum" width="100" align="center"></el-table-column>
                            <el-table-column label="所需数量" prop="useNum" width="100" align="center"></el-table-column>
                            <el-table-column label="所需费用" prop="useNum" width="100" align="center"></el-table-column>
                            <el-table-column label="备注" prop="usePrice" width="100" align="center"></el-table-column>
                        </sc-form-table>
                    </el-main>
				</el-tab-pane>
				<el-tab-pane label="2.生产工序">
                    <el-header v-if="mode!='show'">
                        <div>
                            <el-button type="primary">批量添加工序<el-icon class="el-icon--right"><el-icon-CaretBottom /></el-icon></el-button>
                            <el-button type="primary">添加内部工序<el-icon class="el-icon--right"><el-icon-CaretBottom /></el-icon></el-button>
                            <el-button type="primary">添加委外工序<el-icon class="el-icon--right"><el-icon-CaretBottom /></el-icon></el-button>
                        </div>
                    </el-header>
                    <el-main>
                       <sc-form-table ref="table" v-model="form.list" :addTemplate="addTemplate" placeholder="暂无数据" hideAdd>
                        <el-table-column label="编号" prop="id" width="50" align="center"></el-table-column>
							<el-table-column label="操作" width="110" align="center">
								<template #default="scope">
									<div class="btnDisplay">
										<div class="btn" @click="handleModify(scope.$index,scope.row)">修改</div>
										<div class="btn" @click="handleDelete(scope.$index,scope.row)">删除</div>
									</div>
								</template>
							</el-table-column>
                            <el-table-column label="工序汇报" width="130" align="center">
								<template #default="scope">
									<div class="btnDisplay">
										<div class="btn" @click="open(scope.$index,scope.row)">汇报</div>
										<div class="btn" @click="handleDelete(scope.$index,scope.row)">结束</div>
										<div class="btn" @click="handleDelete(scope.$index,scope.row)">详情</div>
									</div>
								</template>
							</el-table-column>
							<el-table-column label="执行顺序" prop="order" width="90" align="center"></el-table-column>
							<el-table-column label="编号" prop="order" width="90" align="center"></el-table-column>
							<el-table-column label="名称" prop="name" width="90" align="center"></el-table-column>
							<el-table-column label="负责人" prop="head" width="90" align="center"></el-table-column>
                             <el-table-column label="工序汇报情况统计" align="center" v-if="type==0">
                                <el-table-column label="派工数" prop="order" width="65" align="center"></el-table-column>
                                <el-table-column label="合格数" prop="order" width="65" align="center"></el-table-column>
                                <el-table-column label="报废数" prop="order" width="65" align="center"></el-table-column>
                                <el-table-column label="剩余数" prop="order" width="65" align="center"></el-table-column>
                            </el-table-column>
							<el-table-column label="工序状态" prop="category" width="90" align="center"></el-table-column>
							<el-table-column label="工序单价" prop="price" width="90" align="center"></el-table-column>
							<el-table-column label="所需费用" prop="usePrice" width="90" align="center"></el-table-column>
							<el-table-column label="类别" prop="category" width="90" align="center"></el-table-column>
							<el-table-column label="计费方式" prop="chargType" width="90" align="center"></el-table-column>
							<el-table-column label="参考用时" prop="referTime" width="90" align="center"></el-table-column>
							<el-table-column label="备注" prop="remark" width="90" align="center"></el-table-column>
                        </sc-form-table>
                    </el-main>
				
				</el-tab-pane>
				<el-tab-pane label="3.加工费用">
                    <sc-form-table ref="table" v-model="form.list" :addTemplate="addTemplate" placeholder="暂无数据" :hideAdd="mode=='show'">
                        <el-table-column label="费用名称" prop="useNum" width="150" align="center">
                            <template #default="scope">
                                <el-input v-model="scope.row.remark" readonly></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="所需费用" prop="useNum" width="150" align="center">
                            <template #default="scope">
                                <el-input v-model="scope.row.remark" readonly></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="备注" prop="usePrice" width="150" align="center">
                            <template #default="scope">
                                <el-input v-model="scope.row.remark" readonly></el-input>
                            </template>
                        </el-table-column>
                    </sc-form-table>
				</el-tab-pane>
				<el-tab-pane label="4.附件">
                    <div  v-if="mode!='show'">
                        <sc-upload-file v-model="fileurlArr" :limit="3" tip="最多上传3个文件,单个文件不要超过10M,请上传xlsx/docx格式文件">
                            <el-button type="primary" icon="el-icon-upload">上传附件</el-button>
                        </sc-upload-file>
                    </div>
                </el-tab-pane>
			</el-tabs>
        </el-form>
		<template #footer>
			<div id="el-dialog__footer">
	    		<el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="submit()">保存并审核</el-button>
    			<el-button v-if="mode!='show'" :loading="isSaveing" @click="submit()">保存</el-button>
    			<el-button @click="visible=false" >取消</el-button>
            </div>
		</template>
	</el-dialog>
</template>

<script>
	export default {
		emits: ['success', 'closed'],
		data() {
			return {
				mode: "add",
				titleMap: {
					add: '生产加工',
					show: '查看生产加工详情'
				},
				visible: false,
				isSaveing: false,
                grade:"潜力",
				//表单数据
				form: {
					id:"",
					remark: "",
                    overData: "",
                    goodsSpec: "",
                    unit: "",
                    produceNum: "",
                    specModel: "",
                    goods: "",
                    orderNo: "",
                    name:"",
                    list:[]
				},
                addTemplate:{
                    id:'',
                    name:'',
                    desc:'',
                    use:'',
                    number:'',
                    price:'',
                    remark:'',
                },
				cates: [],  //品牌
                Settlement:[],//结算方式
                muDan:[
                    {id:0,name:'否'},
                    {id:1,name:'是'},
                ],
			}
		},
		mounted() {
            this.getCate()
            this.getSettlement()
		},
		methods: {
			//显示
			open(mode='add'){
				this.mode = mode;
				this.visible = true;
				return this
			},
			//表单提交方法
			submit(){
				this.$refs.dialogForm.validate(async (valid) => {
					if (valid) {
						this.isSaveing = true;
						var res  = [];
						if (this.form.id) {
							res = await this.$API.customer.getCustomerList.edit.post(this.form);
						}else{
							res = await this.$API.customer.getCustomerList.add.post(this.form);
						}
						this.isSaveing = false;
						if(res.code == 1){
							this.$emit('success', this.form, this.mode)
							this.visible = false;
							this.$message.success("操作成功")
						}else{
							this.$alert(res.message, "提示", {type: 'error'})
						}
					}else{
						return false;
					}
				})
			},
			//表单注入数据
			setData(data){
				Object.assign(this.form, data)
			},
            // 获取品牌
            async getCate(){
				var res = await this.$API.customer.getBrand.lists.get();
				this.cates = res.data.rows;
			},
            // 获取结算方式
            async getSettlement(){
				var res = await this.$API.customer.getSettlement.get();
				this.Settlement = res.data;
			},
		}
	}
</script>

<style lang="scss">
.el-form-item--default{
    align-items: center;
}
#el-dialog__footer{
    position: absolute;
    right: 20px;
    bottom: 20px;
}
</style>
